<template>
  <el-card
    class="data-card base-card"
    shadow="never"
    :body-style="{ padding: '0px' }"
    style="border: none; flex-grow: 1"
  >
    <template #header>
      <div class="base-card-header">
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="flex-wrap: nowrap; width: 100%"
        >
          <el-select
            v-model="currentItemId"
            style="width: 100%; margin-right: 10px"
            size="default"
            placeholder="请选择数据集"
            :disabled="isEdit"
          >
            <el-option
              v-for="item in printDatasetList"
              :key="item.id"
              :label="item.showName"
              :value="item.id"
            />
          </el-select>
          <el-button
            v-if="!isEdit"
            size="default"
            :icon="Plus"
            circle
            title="新建"
            @click="handleAddDataset"
          />
          <el-button
            v-if="!isEdit"
            size="default"
            :icon="Document"
            circle
            title="编辑"
            @click="handleEditDataset"
          />
          <el-button
            v-if="!isEdit"
            size="default"
            :icon="Delete"
            circle
            title="删除"
            @click="handleDeleteDataset"
          />
          <el-button
            v-if="isEdit"
            size="default"
            :icon="Check"
            circle
            title="保存"
            @click="handleSaveDataset"
          />
          <el-button
            v-if="isEdit"
            size="default"
            :icon="Close"
            circle
            title="取消"
            @click="handleCancelEditDataset"
          />
        </el-row>
      </div>
    </template>
    <el-row style="height: calc(100% - 53px)">
      <el-scrollbar style="height: 100%; padding: 16px; width: 100%">
        <DatasetItem
          v-if="currentItem"
          ref="datasetItemRef"
          :isEdit="isEdit"
          v-model:dataset="currentItem"
          :printInfo="printInfo"
          :datasetGroupList="datasetGroupList"
          :datasetList="datasetList"
          :datasetRelationList="datasetRelationList"
          :dictList="dictList"
        />
      </el-scrollbar>
    </el-row>
  </el-card>
</template>

<script>
import { ElMessageBox } from 'element-plus';
import { Plus, Delete, Close, Check, Document } from '@element-plus/icons-vue';
import { findItemFromList } from '@/common/utils';
import DatasetItem from './printDatasetItem.vue';

export default {
  name: 'Datasource',
  props: {
    printInfo: {
      type: Object,
    },
    datasetGroupList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    datasetList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    datasetRelationList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dictList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    DatasetItem,
  },
  data() {
    return {
      currentItemId: undefined,
      printDatasetList: [],
      isEdit: false,
      currentItem: null,
      Plus,
      Delete,
      Close,
      Check,
      Document,
    };
  },
  inject: ['printTemplate'],
  methods: {
    handleAddDataset() {
      const item = {
        id: undefined,
        showName: '',
        datasetId: '',
        variableName: '',
        loop: false,
        bindGroupPath: [],
        filterParams: [],
        orderParam: [],
        datasetFilterParams: [],
      };
      this.currentItem = item;
      this.isEdit = true;
    },
    handleCancelEditDataset() {
      this.currentItem = { ...this.printDatasetList.find(item => item.id === this.currentItemId) };
      this.isEdit = false;
    },
    async handleSaveDataset() {
      const valid = await this.$refs.datasetItemRef.validateForm();
      if (!valid) {
        return;
      }
      if (this.currentItem.id == null) {
        this.currentItem.id = new Date().getTime();
        this.printDatasetList.push(this.currentItem);
        this.currentItemId = this.currentItem.id;
      } else {
        const index = this.printDatasetList.findIndex(item => item.id === this.currentItem.id);
        console.log('index', index);
        this.printDatasetList.splice(index, 1, this.currentItem);
      }
      console.log('save dataset>printDatasetList', this.printDatasetList);
      this.printTemplate().updageFragmengJson(this.printDatasetList);
      this.isEdit = false;
    },
    handleDeleteDataset() {
      ElMessageBox.confirm('确定删除该数据集吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const index = this.printDatasetList.findIndex(item => item.id === this.currentItem.id);
          this.printDatasetList.splice(index, 1);
          this.currentItemId = undefined;
          this.printTemplate().updageFragmengJson(this.printDatasetList);
        })
        .catch(() => {
          // 错误信息
        });
    },
    handleEditDataset() {
      this.isEdit = true;
    },
  },
  watch: {
    printInfo: {
      handler() {
        if (Array.isArray(this.printInfo.fragmentJson) && this.printInfo.fragmentJson.length > 0) {
          this.printDatasetList = JSON.parse(JSON.stringify(this.printInfo.fragmentJson));
          this.currentItemId = this.printDatasetList[0]?.id;
        }
      },
      immediate: true,
    },
    currentItemId: {
      handler(val) {
        this.currentItem = val != null ? this.printDatasetList.find(item => item.id === val) : null;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.round-search :deep(.el-input__inner) {
  border-radius: 16px;
}
.data-card .data-column-title {
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 16px;
  font-size: 14px;
  color: black;
  font-weight: 400;
  flex-direction: column;
  span {
    overflow: hidden;
    max-width: 185px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
  }
}
:deep(.el-collapse-item__header) {
  height: auto !important;
  line-height: 20px !important;
  padding: 8px 0 !important;
}
.data-card .table-column-item {
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  color: #666;
  .online-icon {
    color: #333;
  }
  .online-icon.flag {
    width: 18px;
    height: 18px;
    font-size: 16px;
    text-align: center;
    color: #999;
    background: #f1f2f3;
    line-height: 18px;
  }

  .online-icon.flag.active {
    color: #ffb800;
    background: #fff8e5;
  }
}
.data-card :deep(.el-collapse-item__content) {
  background: #fafbfc;
  padding-bottom: 0px;
}
.data-card :deep(.el-collapse-item__header) {
  height: 50px;
  line-height: 50px;
}
.data-card :deep(.el-collapse-item__arrow) {
  margin-right: 24px;
}
.data-card .table-column-item :deep(.el-link--inner) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.data-card :deep(.el-tag.el-tag--success) {
  background-color: #e5f7e7;
  border-color: #e5f7e7;
  color: #00ae1c;
}
.data-card :deep(.el-tag.el-tag--warning) {
  background-color: #fff1e5;
  border-color: #fff1e5;
  color: $color-primary;
}
.data-card :deep(.el-tag.el-tag--primary) {
  background-color: #fff8e5;
  border-color: #fff8e5;
  color: #ffb800;
}
</style>
